<template>
    <div>
        <van-nav-bar
  title="余额查询"
  left-text=""
  left-arrow
  @click-left="onClickLeft"
/>  </div>
<div class="my-search">
    <form action="/">
        <van-search v-model="value" placeholder="请输入搜索关键词"  shape="round"   background="#000"
        />
</form>
</div>

    <div  class="main-container">
        <div>
            
        </div>
        <div  v-for="item in MyWallet" class="my-card">
            <div class="top">
                {{item.symbol}}
            </div>
            <div class="middle">
              <img src="@\assets\image\quotes\option.png" alt=""/>
           </div>
        <div>
            <p>可用余额：{{item.usable}}</p>
            <p>冻结金额：{{item.frozenAmount}}</p>
        </div>
    </div>    
</div>
<van-back-top />
</template>

<script setup>
import {_getMyWallet} from '@/service/my.js'
import { onMounted } from 'vue'
import { ref } from 'vue'

const MyWallet = ref([])
const onClickLeft = () => history.back();
onMounted(() => {
    getMyWallet()
});
const value = ref('');
    const onSearch = (val) => showToast(val);
    const onCancel = () => showToast('取消');
const getMyWallet = () => {
    _getMyWallet({
       
    }).then((res) => {
        console.log(res)
        MyWallet.value = res.extends
    })
}

</script>
<style lang="scss" scoped>
.my-search{
    background-color: #000;
}

.main-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  .my-card {
    // 卡片样式
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    height: auto;
    padding: 16px;
    margin: 10px;
    user-select: none;
    background-color: #000;
    border-radius: 10px;
    transition: box-shadow 0.3s ease 0s, border-color 0.3s ease 0s;
    .top {
      margin-bottom: 12px;
      font-size: 24px;
    }
    .middle {
      margin-bottom: 12px;

      img {
        width: 20px;
        height: 18px;
        border-radius: 10px;
      }
    }
  }
}
</style>